<!-- 优惠券 -->
<template>
  <div class="coupon-container">
    <!-- 顶部操作栏 -->
    <div class="top-bar">
      <el-input 
        v-model="code" 
        placeholder="请输入优惠码" 
        style="width: 200px; margin-right: 10px;"
      >
        <template #append>
          <el-button type="primary">兑换</el-button>
        </template>
      </el-input>
      <el-link href="/coupons" target="_blank" style="float: right;">优惠券使用规则 >></el-link>
      <el-button type="primary" plain icon="ShoppingCart" style="float: right; margin-right: 10px;">
        领券中心
      </el-button>
    </div>

    <!-- 状态标签页 -->
    <el-tabs v-model="activeTab" class="status-tabs">
      <el-tab-pane label="可使用" name="available"></el-tab-pane>
      <el-tab-pane label="已使用" name="used"></el-tab-pane>
      <el-tab-pane label="已失效" name="expired"></el-tab-pane>
    </el-tabs>

    <!-- 优惠券列表 -->
    <el-row :gutter="20" class="coupon-list">
      <el-col :span="8" v-for="(item, index) in filteredCoupons" :key="index">
        <el-card shadow="hover" :class="[item.status]">
          <div class="amount-box">
            <h2>{{ item.amount }}</h2>
            <p>每满{{ item.fullAmount }}元可用</p>
          </div>
          <div class="date-box">
            <p>{{ item.startDate }} - {{ item.endDate }}</p>
          </div>
          <div class="scope-box">
            <p>{{ item.scope }}</p>
          </div>
          <el-button 
            type="primary" 
            @click="useCoupon(item)"
            class="use-btn"
            :disabled="item.status !== 'available'"
          >立即使用</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const code = ref('');
const activeTab = ref('available');
const coupons = [
  // ... 填充示例数据 ...
];

const filteredCoupons = computed(() => {
  return coupons.filter(coupon => coupon.status === activeTab.value);
});

const useCoupon = (coupon) => {
  // 处理使用逻辑
};
</script>


<style scoped>
.coupon-container {
  padding: 20px;
}

.top-bar {
  margin-bottom: 20px;
}

.status-tabs {
  margin-bottom: 20px;
}

.coupon-list {
  margin-top: 20px;
}

.el-card {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.amount-box {
  text-align: center;
  font-size: 24px;
  color: #409eff;
}

.date-box {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #999;
  font-size: 12px;
}

.scope-box {
  position: absolute;
  bottom: 50px;
  left: 15px;
  right: 15px;
  text-align: center;
  color: #666;
  font-size: 12px;
}

.use-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.available {
  background-color: #fff;
  border: 1px solid #ebeef5;
}

.used,
.expired {
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #999;
}
</style>